<template>
  <div>
    <div>
      <div
        class="box-shadow"
        style="
          height: 230px;
          position: relative;
          background-color: white;
          border-radius: 10px;
        "
      >
        <span style="font-size: 18px; font-weight: bold">直播控制台</span>
        <div style="margin-left: 50px; margin-top: 20px">
          <el-col :span="6">
            <div style="border-radius: 10px">
              <el-image style="width: 100px; height: 100px" :src="broadcastDataStr.shareImgStr"></el-image>
              <!--              <el-image src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"></el-image>-->
            </div>
          </el-col>
          <el-col :span="8">
            <div class="typeface">
              {{ broadcastDataStr.name }}
            </div>

            <div class="typeface2" style="margin-top: 5px">
              开播时间： {{ broadcastDataStr.startTimeStr }} - {{ broadcastDataStr.endTimeStr }}
            </div>

            <div class="typeface2" style="margin-top: 5px">
              房间号： {{ broadcastDataStr.roomid }}
            </div>

            <div class="typeface2" style="margin-top: 5px">
              主播 ： {{ broadcastDataStr.anchor_name }}
            </div>
            <div class="typeface2" style="margin-top: 5px">
              微信号： {{ broadcastDataStr.anchorWechat }}
            </div>
          </el-col>
        </div>
      </div>
      <div
        class="box-shadow"
        style="position: relative; background-color: white; border-radius: 10px"
      >
        <div class="typeface" style="font-size: 18px; font-weight: bold">
          推送控制台
        </div>

        <div class="btn">
          <el-button
            style="position: absolute; right: 0px"
            @click="selectCommodity"
            >导入商品</el-button
          >
        </div>

        <el-table :data="broadcastDataStr.goods.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%">
          <el-table-column prop="goods_id" label="商品编号" width="100"> </el-table-column>
          <el-table-column prop="name" label="商品信息" width="800">
            <template slot-scope="scope">
              <div style="display: flex; margin-top: 10px">
                <!-- <img style="width:89px;height:89px;" :src="scope.row.cover_img" /> -->
                <div
                  style="width: 100px; height: 100px"
                  v-html="imgTransition(scope.row.cover_img)"
                ></div>
                <div
                  style="margin-top: 10px; margin-left: 20px; margin-top: 30px"
                >
                  <div>{{ scope.row.name }}</div>
                  <span v-if="scope.row.price_type == 1">
                    ￥ {{ scope.row.priceStr }} 元
                  </span>
                  <span v-if="scope.row.price_type == 2">
                    ￥ {{ scope.row.priceStr }} 元 - ￥ {{ scope.row.priceStr2 }} 元
                  </span>

                  <span v-if="scope.row.price_type == 3">
                    <div>市场价 ￥ {{ scope.row.priceStr }} 元</div>
                    <div>现价 ￥ {{ scope.row.priceStr2}} 元</div>
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <div>
                <span><a @click="openConsole(scope.row)">{{scope.row.on_sale == '0'?'上架':'下架'}}</a></span>
<!--                 <span><a @click="deleteRoom(scope.row)">删除</a></span> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
        <el-pagination
          style="
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          "
          background
          layout="prev, pager, next"
          :page-size="pagesize"
          :total="broadcastDataStr.goods.length"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      </div>
    </div>
    <importCommodity
      v-if="open"
      @toCloseBox="toCloseBox"
      @multipleSelection="multipleSelection"
      :flag="open"
      ref="selTable"
    ></importCommodity>
  </div>
</template>

<script>
import importCommodity from "@/components/Activity/ImportCommodity";
import { addGoods ,onsale,updateWaChatImg} from "@/api/applet/broadcast";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: { importCommodity },
  data() {
    //这里存数据
    return {
      selectedData: [],
      //创建直播间
      dialogVisible: false,
      //总数量
      total: 0,
      info: [],
      pagesize: 5,
      currentPage: 1,
      query: {
        offset: 1,
        limit: 5,
        status: 2,
      },
      //上下架请求参数
      onsaleQuery:{
        id:'',
        goodsId:'',
        onSale:''
      },
      //已入库商品
      goodsList: [],
      broadcastDataStr: null,
      open: false,
      goods: null,
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  created() {
    this.getData();
  },
  //方法
  methods: {
    getData() {
      this.broadcastDataStr = this.$route.query.data;
      if (this.$route.query.data.roomid != undefined) {
        let objStr = JSON.stringify(this.$route.query.data);
        sessionStorage.setItem("data-xy", [objStr]);
      } else if (this.$route.query.data.roomid == undefined) {
        this.broadcastDataStr = JSON.parse(sessionStorage.getItem("data-xy"));
      }
      this.goods = this.broadcastDataStr.goods;
      this.selectedData = this.goods
    },
    getList(){
      debugger
      var id = this.broadcastDataStr.roomid
      updateWaChatImg(this.broadcastDataStr.roomid).then((response) => {
        this.broadcastDataStr.goods = response.data
      })
    },
    selectCommodity() {
      this.open = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedData);
      });
    },
    multipleSelection(data) {
      this.$nextTick(() => {
        this.selectedData = data;
      });
      this.goodsId = new Array();
      for (let i = 0; i < data.length; i++) {
        this.goodsId.push(data[i].goodsId);
      }
      let datas = {};
      datas.ids = this.goodsId;
      datas.roomId = this.broadcastDataStr.roomid;
      addGoods(datas).then((response) => {
        console.log(data,'data');
        Array.prototype.push.apply(this.broadcastDataStr.goods, data);
        // this.broadcastDataStr.goods.sort()
        // this.broadcastDataStr.goods.reverse()
        console.log(this.broadcastDataStr,'this.broadcastDataStr');
        this.open = false;
        // this.$router.push('/activity/broadcast/info');
        this.getList()
        this.$forceUpdate()
      });
    },
    toCloseBox() {
      this.open = false;
    },
    //开播码
    shareImgMethod() {},
    //换页
    handleCurrentChange: function (cpage) {
      this.currentPage = cpage;
      // this.getData();
    },
    //上下架
    openConsole(row){
      this.onsaleQuery.id= this.broadcastDataStr.roomid;
      this.onsaleQuery.goodsId = row.goods_id ;
      this.onsaleQuery.onSale = row.on_sale == 0?1:0;
      onsale(this.onsaleQuery).then((response) => {
        if (response.data){
          this.getList()
        }
        this.getList()
      })
    },
    //转换微信图片
      imgTransition(img) {
        var imgid = Math.random(),
          frameid = 'frameimg' + imgid;
        window['img' + imgid] = '<img id="img" style="width:89px;height:89px" src=\'' + img + '?kilobug\' />' +
          '<script>window.onload = function() { parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'img\').height+\'px\'; }<' + '/script>';
        let msg = '<iframe id="' + frameid + '" src="javascript:parent[\'img' + imgid + '\'];" frameBorder="0" scrolling="no" width="89px" height="89px"></iframe>'
        return msg
      },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //声明周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁之后
  activated() {}, //缓存keep-alive
};
</script>

<style scoped>
.box-shadow {
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 70%;
  height: 100%;
  margin: auto;
  margin-top: 2%;
  margin-bottom: 2%;
  background-color: whitesmoke;
}

.typeface {
  display: inline-block;
  font-size: 14px;
  color: #333;
  position: relative;
}

.typeface2 {
  width: 100%;
  color: #c0c4cc;
  font-size: 14px;
}

.typeface3 {
  display: inline-block;
  font-size: 14px;
  color: #333;
  position: relative;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}
.btn {
  width: 100%;
  height: 40px;
  position: relative;
  margin: 20px 0;
}
.pagination {
  height: 30px;
  position: relative;
  bottom: -10px;
}
</style>
